<template>
  <div class="layout-body">
    <el-container>
      <el-aside
        class="aside"
        :style="{ width: asideWidth + 'px' }"
      >
        <div class="logo">
          <img
            class="logo-img"
            src="/src/assets/yuTang.png"
            alt=""
          >
          <span v-if="!menuCollapse">语堂管理后台</span>
        </div>
        <div class="menu-panel">
          <el-menu
            :default-openeds="defaultOpeneds"
            :collapse-transition="false"
            :collapse="menuCollapse"
            class="el-menu-vertical-demo"
            default-active="2"
            background-color="#3d3c4a"
            text-color="#fff"
            active-text-color="#fff"
            router
            :defaultActive="defaultActive"
          >

            <template v-for="item in menuList">
              <el-sub-menu
                :index="item.path"
                v-if="item.children"
              >
                <template #title>
                  <i :class="['iconfont', item.icon]"></i>
                  <span class="menu-name">{{ item.menuName }}</span>
                </template>
                <el-menu-item
                  v-for="subItem in item.children"
                  :index="subItem.path"
                >
                  {{ subItem.menuName }}
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item
                v-else
                index="item.path"
              >
                <template #title>
                  <i :class="['iconfont', item.icon]"></i>
                  <span class="menu-name">{{ item.menuName }}</span>
                </template>
              </el-menu-item>

            </template>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div
            :class="['iconfont', 'op-menu', menuCollapse ? 'icon-expand' : 'icon-collapse']"
            @click="opMenu"
          ></div>
          <div class="menu-bread">
            <el-breadcrumb>
              <template v-for="item in menuBreadCrumbList">
                <el-breadcrumb-item v-if="item.name">
                  {{ item.name }}
                </el-breadcrumb-item>

              </template>
            </el-breadcrumb>
          </div>
        </el-header>
        <el-main class="main-content">
          <div class="tag-content">
            <el-tabs
              type="border-card"
              v-model="defaultActive"
              @tab-change="tabClick"
              @edit="editTab"
            >
              <el-tab-pane
                v-for="item in tabList"
                :label="item?.menuName"
                :name="item?.path"
                :closable="tabList.length > 1"
              >
                <div class="content-body">
                  <router-view></router-view>
                </div>
              </el-tab-pane>
            </el-tabs>

          </div>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const formData = ref({});
const formDataRef = ref();
const rules = {
  title: [{ required: true, message: "请输入内容" }],
};


// 系统菜单
const menuList = ref([
  {
    menuName: '内容管理',
    icon: 'icon-article',
    path: '/forum',
    children: [
      {
        menuName: '帖子管理',
        path: '/forum/article'
      },
      {
        menuName: '评论管理',
        path: '/forum/comment'
      },
      {
        menuName: '板块管理',
        path: '/forum/board'
      },
    ]
  },
  {
    menuName: '用户管理',
    icon: 'icon-user',
    path: '/user',
    children: [
      {
        menuName: '用户管理',
        path: '/user/list'
      },
    ]
  },
  {
    menuName: '设置',
    icon: 'icon-settings',
    path: '/settings',
    children: [
      {
        menuName: '系统设置',
        path: '/settings/sys'
      },
    ]
  }
])

// 默认选中
const defaultActive = ref()


const menuMap = {}
// 默认展开
const defaultOpeneds = ref([])
// 初始化默认所有都被打开
const init = () => {
  menuList.value.forEach((item) => {
    defaultOpeneds.value.push(item.path)
    item.children.forEach(subItem => {
      menuMap[subItem.path] = subItem;
    })
  })
}

init();

// 左边导航栏宽度
const asideWidth = ref(250)
// 收起关闭菜单
const menuCollapse = ref(false)
const opMenu = () => {
  menuCollapse.value = !menuCollapse.value;
  if (menuCollapse.value) {
    asideWidth.value = 63;
  } else if (!menuCollapse.value) {
    asideWidth.value = 250;
  }
}

// tab操作
const tabList = ref([]);
const tabClick = (e) => {
  router.push(e)
}
const editTab = (targetKey, action) => {
  if (action !== 'remove') {
    return
  }
  let currentPath = defaultActive.value;
  let tabs = tabList.value;
  // 关闭当前选中行
  if (targetKey == defaultActive.value) {
    tabs.forEach((tab, index) => {
      if (targetKey == tab.path) {
        let nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          currentPath = nextTab.path
        }
      }
    })
  }

  tabList.value = tabs.filter((tab) => {
    return tab.path !== targetKey
  })
  if (currentPath !== defaultActive.value) {
    router.push(currentPath)
  }

}

// 面包屑导航
const menuBreadCrumbList = ref([])
watch(() => route, (newVal, oldVal) => {
  defaultActive.value = newVal.path
  menuBreadCrumbList.value = newVal.matched
  let currentMenu = tabList.value.find(tab => {
    return tab.path == defaultActive.value
  })
  if (!currentMenu) {
    tabList.value.push(menuMap[route.path]);
  }
}, { immediate: true, deep: true });
</script>

<style lang="scss">
// 菜单收起样式
.el-popper {
  border: none !important;

  .el-menu-item.is-active {
    background: var(--el-color-primary);
  }

  .el-menu-item:hover {
    color: #d8d8ee;
  }

  .el-menu--popup {
    padding: 0;
  }
}

.layout-body {
  .aside {
    background: #3d3c4a;

    .logo {
      height: 50px;
      display: flex;
      align-items: center;
      color: #fff;
      background: #000;
      font-size: 20px;
      padding-left: 7px;

      .logo-img {
        width: 50px;
        margin-right: 8px;

      }
    }

    .menu-panel {
      height: calc(100vh - 50px);

      .menu-name {
        padding-left: 10px;
      }

      // 去除边框
      .el-menu {
        border-right: none;
      }


      .el-menu-item {
        background: #3d3c4a;
      }

      .el-menu-item.is-active {
        color: #fff;
        background: var(--el-color-primary);
      }

      .el-menu-item:hover {
        color: #d8d8ee;
      }
    }
  }

  .header {
    display: flex;
    background: #fff;
    height: 50px;
    border-bottom: 2px solid #ddd;
    align-items: center;
    padding: 0 10px !important;
    line-height: 50px;

    .op-menu {
      font-size: 20px;
      cursor: pointer;
      color: #3a3a40;
    }

    .menu-bread {
      margin-left: 10px;
    }
  }

  .main-content {
    padding: 0;

    .tag-content {
      .el-tabs--border-card {
        border: none;
      }

      .el-tabs__content {
        padding: 0;
      }
    }

    .content-body {
      overflow: hidden;
      padding: 10px 10px 5px 10px;
    }
  }

}
</style>
